上一篇文章中我们已经实现了评论的发布功能,现在要实现回复评论的功能,,首先呢,要知道你回复的是哪一条评论,所以我们这里要或得评论的id,当点击评论的时候实现评论的回复,这里用到@click="reply(item)",把该方法放到methods中,这里叫做item.id,然后在new vue里面的data里面定义一个参数,把item.id赋给comment_id,comment_id的值一开始为空,然后在UIChatBox.open里的ret函数参数里面调用comment_id: vm.comment_id
data:{
comment_id: null
}
methods: {
reply: function (item) {
this.comment_id = item.id
}
}
这里已经获取了comment_id的值,当回复时应该让手机默认键盘弹出,输入框或得焦点,,这里用到了UIChatBox.popupKeyboard();然后当你回复时,一般常见的会有回复:“某某”的评论或者“@”发表评论人的评论,所以呢,这里要或得发表评论的用户信息,,在data里面设置一个user额变量,再将item的用户id赋给user,所以综上所述,代码如下
data:{
user: JSON.parse(localStorage.getItem('user')),
comment_id: null,
comments: []
},
methods: {
reply: function (item) {
this.comment_id = item.id
UIChatBox.popupKeyboard();
UIChatBox.value({
msg: '@' + item.user.username + ' '
}); //设置输入框的值
}
}
到这里,我们回复的功能就已经基本实现了,以下是完整代码
html
<div class="aui-content comment-list" id="app">
<ul class="comment-list">
<li class="item aui-padded-b-10" v-for="item in comments" @click="reply(item)">
<div class="aui-row aui-padded-10">
<div class="aui-col-xs-2 img aui-padded-r-10" :class="item.user_id == user.id ? 'aui-pull-right' : ''">
<img src="../image/demo1.png" class="aui-img-round">
</div>
<div class="aui-col-xs-10 aui-padded-r-10" :class="item.user_id == user.id ? 'aui-text-right' : ''">
<p>{{item.user.username}} <span>角色 {{item.id}}</span></p>
<p>{{item.user.created_at}}</p>
</div>
</div>
<div class="message aui-padded-r-15 ">
{{item.content}}
</div>
</li>
</ul>
</div>
js
apiready = function(){
var id=api.pageParam.id;
var UIChatBox = api.require('UIChatBox');
var vm=new Vue({
el:'#app',
data:{
user: JSON.parse(localStorage.getItem('user')),
comment_id: null,
comments: []
},
methods: {
reply: function (item) {
this.comment_id = item.id
UIChatBox.popupKeyboard();
UIChatBox.value({
msg: '@' + item.user.username + ' '
});
}
},
created:function(){
var that=this;
app.get('news/'+id + '/comments',function(data){
that.comments=data.data;
// console.log(data)
},function(err){
})
}
});
// app.alert(localStorage.getItem('token'))
UIChatBox.open({
style:{
indicator:{
target:'both'
}
}
}, function(ret, err) {
if (ret) {
if (ret.eventType == 'send') {
//post到服务端接口
app.post('news/' + id + '/comments', {
comment_id: vm.comment_id,
content: ret.msg
}, function (data) {
vm.comments.push(data)
api.toast({
msg: '发送成功'
});
UIChatBox.closeKeyboard();
vm.comment_id = null
}, function (xhr) {
switch (xhr.status) {
case 422:
api.toast({
msg: xhr.responseJSON.content[0]
});
break;
}
})
}
} else {
alert(JSON.stringify(err));
}
});
};
补充说明,当我们回复别人的评论时,别人发表的评论用户头像在左边,本人发布的回复或者评论头像在右边,这里有点像qq、微信的聊天界面,大家可以想象以下,,所以这里我们要判断以下让列表中的头像靠左或靠右,如果评论item.user_id 等于user.id时,说明是作者本人发布,在这里就出现了以下代码
:class="item.user_id == user.id ? 'aui-pull-right' : ''"
当符合item.user_id == user.id时添加aui框架中的aui-pull-right样式,否则不添加。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。